<template>
  <div class="layout-pd">
    <el-button type="primary" @click="saveConfig">保存</el-button>
    <el-form :model="state.configData" ref="configDataRef" :rules="rules" v-loading="state.loading" label-width="120px">
      <el-tabs>
        <el-tab-pane label="系统设置">
          <el-form-item label="启用验证码">
            <el-switch v-model="state.configData.sys_Captcha"></el-switch>
          </el-form-item>
          <el-form-item label="默认密码" prop="sys_Default_Password">
            <el-input v-model="state.configData.sys_Default_Password"></el-input>
          </el-form-item>
          <el-form-item label="密码错误次数" prop="sys_password_wrong_number">
            <el-input v-model="state.configData.sys_password_wrong_number" :min="0"></el-input>
          </el-form-item>
          <el-form-item prop="sys_login_delay_time">
            <div>
              <div class="tip">输入密码错误将用户锁定，设置0表示不启动该功能</div>
              <el-radio-group v-model="state.configData.sys_password_wrong_strategy" prop="sys_password_wrong_strategy">
                <el-radio :value="'LOCK_USER'">账号锁定</el-radio>
                <el-radio :value="'LOGIN_DELAY'">延时登录</el-radio>
              </el-radio-group>
              <div v-if="state.configData.sys_password_wrong_strategy === 'LOGIN_DELAY'">
                <span class="lockTime">延迟时间</span>
                <el-input-number
                  v-model="state.configData.sys_login_delay_time"
                  :min="1"
                  :precision="0"
                  :step="1"
                  controls-position="right"
                />
                分钟
              </div>
            </div>
          </el-form-item>
          <el-form-item label="单点登录">
            <el-switch v-model="state.configData.single_Login"></el-switch>
          </el-form-item>
          <el-form-item label="水印">
            <el-switch v-model="state.configData.sys_WarterMark"></el-switch>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="文件设置">
          <el-form-item label="文件存储类型">
            <el-input v-model="state.configData.file_Save_Type"></el-input>
          </el-form-item>
          <el-form-item label="文件存储路径">
            <el-input v-model="state.configData.file_Save_Path"></el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>
<script setup lang="ts" name="systemConfig">
import { isInteger, CheckIsNotNullOrEmpty } from "@/utils/util";
import { onMounted, reactive, ref } from "vue";
import configApi from "@/api-services/apis/system/configApi";
import { SysConfig } from "@/api-services/models/system";
import { feature } from "@/utils/axios-utils";
import { NotificationError, NotificationSuccess } from "@/utils/notification";

const configDataRef = ref();
const state = reactive({
  loading: false,
  configData: {} as SysConfig.SystemConfigInfo
});

onMounted(async () => {
  state.loading = true;
  const res = await configApi.getSystemConfig();
  state.configData = res.data.data;
  state.loading = false;
});
const saveConfig = async () => {
  //校验rules
  configDataRef.value
    .validate()
    .then(async () => {
      const [err] = await feature(configApi.updateSystemConfig(state.configData));
      if (err) {
        NotificationError(err.message);
      } else {
        NotificationSuccess("修改成功");
      }
    })
    .catch((err: any) => {
      NotificationError(err.message);
    });
};

const loginDelayTimeValidate = (rule: any, value: any, callback: any) => {
  if (state.configData.sys_password_wrong_strategy === "LOGIN_DELAY") {
    if (!value) {
      callback(new Error("请输入延迟时间（分钟）"));
    } else if (!isInteger(value)) {
      callback(new Error("请输入数字"));
    } else if (value > 86400) {
      callback(new Error("请输入小于等于86400(一天)的数字"));
    } else if (value < 1) {
      callback(new Error("请输入大于等于1的数字"));
    }
  } else {
    callback();
  }
};
const passwordWrongNumberValidate = (rule: any, value: any, callback: any) => {
  if (!CheckIsNotNullOrEmpty(value)) {
    callback(new Error("请输入密码错误次数"));
  } else if (!isInteger(value)) {
    callback(new Error("请输入正整数"));
  } else if (value > 99) {
    callback(new Error("请输入小于等于99的数字"));
  } else if (value < 0) {
    callback(new Error("请输入大于等于0的数字"));
  } else {
    callback();
  }
};
const rules = reactive({
  sys_Default_Password: [
    { required: true, message: "请输入默认密码", trigger: "blur" },
    { max: 20, message: "请输入小于等于20个字符", trigger: "blur" },
    { min: 4, message: "请输入大于等于4个字符", trigger: "blur" }
  ],
  sys_password_wrong_number: [{ required: true, validator: passwordWrongNumberValidate, trigger: "blur" }],
  sys_login_delay_time: [{ validator: loginDelayTimeValidate, trigger: "blur" }]
});
</script>
